<template>
  <v-container class="grey lighten-5 pa-3">
    <h2>课程列表</h2>
    <v-row>
      <v-col v-for="n in courses.data" :key="n._id" cols="6" md="4">
        <v-hover v-slot:default="{ hover }" open-delay="100">
          <v-card
            :elevation="hover ? 16 : 2"
            :to="`/courses/${n._id}`"
            class="mx-auto"
            max-width="400"
            outlined
            tile
          >
            <v-img class="white--text align-end" height="200px" :src="n.cover">
              <v-card-title>{{ n.name }}</v-card-title>
            </v-img>

            <v-card-subtitle class="pb-0">发布时间</v-card-subtitle>

            <v-card-text class="text--primary">
              <div>{{ n.createdAt }}</div>
            </v-card-text>

            <v-card-actions>
              <v-btn color="orange" text>
                查看详情
              </v-btn>
            </v-card-actions>
          </v-card>
        </v-hover>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
export default {
  async asyncData({ $axios }) {
    const courses = await $axios.$get("courses");
    return {
      courses
    };
  }
};
</script>
